<div class="ui stackable three column doubling centered grid">
  <div class="column">
    <form class="ui large form" autocomplete="off" {{action 'submit' on='submit'}}>
      <div class="ui aligned segment basic no margin no padding">
        <h3 class="weight-400">{{t 'Forgot Password'}}</h3>
      </div>
      <div class="ui segments">
        <div class="ui segment {{if this.isLoading 'loading' ''}}">
          {{#if this.errorMessage}}
            <div class="ui negative message">
              <p>{{this.errorMessage}}</p>
            </div>
          {{/if}}
          {{#if this.successMessage}}
            <div class="ui info message">
              <p>{{this.successMessage}}</p>
            </div>
          {{/if}}
          <div class="field">
            {{#if this.token}}
              <div class="ui left icon input">
                <i class="lock icon"></i>
                  <Input @type={{if this.showNewPass "text" "password"}} @name="password" placeholder={{t "Password"}} @value={{this.password}} />
                <div class="ui small basic icon buttons">
                  <button class="ui button" id="eye2" {{ action 'showNewPassword'}}>
                    <i class="{{if this.showNewPass 'hide' 'unhide'}} basic icon"></i>
                  </button>
                </div>
              </div>
              <div class="ui hidden divider"></div>
              <div class="ui left icon input">
                <i class="lock icon"></i>
                  <Input @type={{if this.showConfirmPass "text" "password"}} @name="password_repeat" placeholder={{t "Confirm Password"}} />
                <div class="ui small basic icon buttons">
                  <button class="ui button" id="eye2" {{ action 'showConfirmPassword'}}>
                    <i class="{{if this.showConfirmPass 'hide' 'unhide'}} basic icon"></i>
                  </button>
                </div>
              </div>
            {{else}}
              <div class="ui left icon input">
                <i class="mail icon"></i>
                <Input @name="email" placeholder={{t "Email ID"}} @value={{this.identification}} />
              </div>
            {{/if}}
          </div>
          {{#if this.showHcaptcha}}
            <HCaptcha @onSuccess={{action (mut this.captcha)}} @onExpired={{action (mut this.captcha)}} @onRender={{action (mut this.captchaRendered)}} />
          {{/if}}
          <div class="ui center aligned segment basic">
            <button type="submit" class="ui fluid large teal submit button reset-password {{if (and (not this.captcha) this.showHcaptcha this.captchaRendered) 'disabled'}}">
              {{t 'Reset Password'}}
            </button>
          </div>
        </div>
        <div class="ui secondary segment center aligned">
          <a href="{{href-to 'register'}}" class="text muted weight-800">{{t 'New to site? Create Account'}}</a>
        </div>
      </div>
    </form>
  </div>
</div>
